<template>
  <div class="block_upload">
    <div class="flex_block_upload">
 
      <!-- 默认展示数据 --> 
      <div v-for="(pItem, pIndex) in defaultPicArrNew" :key="pIndex">
        <div class="successDiv">
          <img class="img_info" :src="pItem?.file_url" />
          <div class="opration_shadow"  @click="lookViewer(pIndex, 'default')">
            <span class="opration_icon">
              <el-icon><ZoomIn /></el-icon
            ></span>
             <!-- <span class="opration_icon" @click="delPic(pIndex, 'default')">
              <el-icon>  <Delete /> </el-icon>
            </span> -->
          </div>
          <div class="closePic_upload" v-show="!propsDisabled">
            
              <span class="opration_icon del_icon" @click="delPic(pIndex, 'default')">
                 <el-icon><Close /></el-icon>
            </span>
          </div>
        </div>
      </div>
 
      <!-- 上传编辑数据 -->
      <div v-for="(pItem, pIndex) in picFileList" :key="pIndex" >
        <div v-if="pItem.raw?.tip" class="uploadingDiv">
          <img class="img_info" :src="pItem.url" />
          <div class="opration_shadow err_info_bg">
              <!-- <span class="opration_icon" @click="delPic(pIndex, pItem.defaultType)">
               <el-icon>  <Delete /> </el-icon>
              </span>  -->
              <span class="warning_tip"> ! </span>
          </div>
          <div class="tip_file_error">
              
              <div class="tip_info">
                 <el-tooltip class="box-item" effect="dark" :content="pItem?.raw?.tip" placement="top">
                <span> {{pItem.raw?.tip}}</span>
              </el-tooltip>
            
              </div>
            
          </div>
           <div class="closePic_upload err_up">
            
              <span class="opration_icon" @click="delPic(pIndex, pItem.defaultType)">
                 <el-icon><Close /></el-icon>
            </span>
          </div>
        </div>
        <div v-if="pItem.status == 'success'" class="successDiv">
          <img class="img_info" :src="pItem.response?.file_url" />
          <div class="opration_shadow" @click="lookViewer(pItem.response?.numNo)">
            <span class="opration_icon" >
              <el-icon><ZoomIn /></el-icon
            ></span>
            <!-- <span class="opration_icon"  @click="delPic(pIndex, pItem.defaultType)">
              <el-icon>  <Delete /> </el-icon>
            </span> -->
          </div>
          <div class="closePic_upload">
            
              <span class="opration_icon del_icon" @click="delPic(pIndex, pItem.defaultType)">
                 <el-icon><Close /></el-icon>
            </span>
          </div>
        </div>
      </div>

      <upload v-show="!propsDisabled" ref="uploadRef" :refnameBase="refname" v-bind="uploadDataTwo" @changeFile="changeFile" v-model="picFileList"></upload>
    </div>
    <div class="require_tip">{{tipMsg}}</div>
    <!-- getFileData -->
  </div>
</template>
<script lang="ts" setup>
import upload from "./index.vue";
import { ref, reactive, watch, computed, onMounted,nextTick } from "vue";
import { api as viewerApi } from "v-viewer";

const props = withDefaults(
  defineProps<{
    propsDisabled?:boolean;
    path: string;
    imageProps?: Object;
    imageType?: string;
    tipMsg?:string;
    toastBool?:boolean;
    refname?:object;//上一个页面的refName，搭配loading使用
  }>(),
  {
    propsDisabled:false,
    path: "",
    tipMsg:''
  }
);
 
const uploadRef = ref(null);
const defaultPicArr = defineModel<Array<Record<string, any>>>({ default: [] });

const defaultPicArrNew = ref(JSON.parse(JSON.stringify(defaultPicArr.value)));
const picFileList = ref([]);

watch(()=>defaultPicArr.value,newVal=>{
  defaultPicArrNew.value=JSON.parse(JSON.stringify(defaultPicArr.value));
})

// const newPicFileArr=computed(()=>{
//    return[...defaultPicArr.value]
// })
// console.log(newPicFileArr)

const uploadDataTwo = reactive({
  uploadLoading: true,
  listType: "picture-card",
  uploadClass: "picUpload",
  accept: ".jpg,.jpeg,.png,.gif,.bmp,.webp", //只允许图片上传
  fileListShow: false,
  imageType: props.imageType,
  imageProps: props.imageProps,
  tipShow: false, //提示不展示
  path: props.path,
  toastBool:props.toastBool,//吐丝提醒
});

let successIndex = 0;
const changeFile = fileList => {
  successIndex = 0;
  console.log(fileList, "上传变化");
  // let newFileList=JSON.parse(JSON.stringify(picFileList.value));
  let newFileList = [];
  if (fileList.length) {
    newFileList = fileList.map(fItem => {
      if (fItem.response) {
        fItem.response.numNo = successIndex;
        successIndex = successIndex + 1;
      }
      return {
        ...fItem
      };
    });
  }
  console.log(newFileList);
  picFileList.value = newFileList;
};

const delPic = (pindex, type) => {
  if (type == "default") {
    defaultPicArrNew.value.splice(pindex, 1);
  } else {
    picFileList.value.splice(pindex, 1);
  }
};
const getUploadData = () => {
  let uploadData = uploadRef.value.getFileData();
  let newDefaultArr = JSON.parse(JSON.stringify(defaultPicArrNew.value));
  let newData = [...newDefaultArr, ...uploadData];

  return newData;
};
const lookViewer = (index, type) => {
  console.log(index, "查看。。。");
  let successFilelist = getUploadData();
  let imageList = successFilelist.map(img => {
    return img.file_url;
  });

  let indexOf = index;

  if (type != "default") {
    indexOf = defaultPicArrNew.value.length + index;
  }

  viewerApi({
    images: imageList,
    options: {
      toolbar: true,
      // url: 'data-source',
      fullscreen: false,
      initialViewIndex: indexOf //默认打开哪个
    }
  });
};

onMounted(async ()=>{
 
})
const resetFileUpload=()=>{
  picFileList.value=[]
}
defineExpose({
  resetFileUpload,
  getUploadData,baseUploadRef:computed(()=>uploadRef.value.refName)
});
</script>
<style lang="scss" scoped>
@import url("./picUpload.scss");
</style>
